<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		a{
			text-decoration: none;
		}
		li{
			list-style: none;
		}
		#list ul{
			height: 30px;
		}
		#list ul li a{
			display: block;
			float: left;
			margin-right: 5px;
			width: 120px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			color: #000;
			font-size: 宋体;
			cursor: pointer;
			border: 1px solid #f40;
			border-radius: 20px;
			transition: 0.8s;
		}
		.active{
			background-color: #f40;
		}
		#list ul li a:hover{
			background-color: #f40;
			color: #fff;
		}
		#content div{
			width: 600px;
			height: 200px;
			background-color: pink;
			margin-top: 5px;
			font-size: 30px;
		}
	</style>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	<div id='list'>
		<ul>
			<li v-for='(inx,lt) in List.list' @click='change(inx+1)'><a href="{{List.href[inx]}}" :class={active:index===inx+1}>{{lt}}</a></li>
		</ul>
	</div>
	<div id='content'>
		<div v-for='(inx,item) in Content.content' v-if='index===inx+1'>{{item}}</div>
	</div>
</div>	
<script>
	var vm = new Vue({
		el : '#root',
		data : {
			index : 1,
			List : {
				list : ['about me','call me','copyright'],
				href : ['#aboutme','#callme','#copyright']
			},
			Content : {
				content : ['关于我','联系我','版权'],
			}
		},
		methods : {
			change(index){
				this.index = index;
			}
		}
	})
</script>
</body>
</html>